<template>
  <div id="right-side">

    <!--登录-->
    <div class="rs_top">
      <img src="../../assets/images/container1/rightside/下载.png" alt="">
      <h4>HI，欢迎来到奖多多</h4>
      <a  role="button" class="btn btn-danger" @click="gologin">用户登录</a>
      <a role="button" class="btn btn-danger">用户注册</a>
    </div>

    <!--公告-->
    <div class="rs_middle">
      <div>

        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
            <a href="#net" aria-controls="home" role="tab" data-toggle="tab">网络公告</a>
          </li>
          <li role="presentation"><a href="#game" aria-controls="profile" role="tab" data-toggle="tab">赛事公告</a>
          </li>
        </ul>


        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="net">
            <div class="nodata-icon">
              <img src="../../assets/images/container1/rightside/5.jpg" height="72" width="70"/></div>
            <div class="txt">暂无数据</div>
          </div>
          <div role="tabpanel" class="tab-pane" id="game">
            <!--为空-->
          </div>
        </div>
      </div>
    </div>

    <!--得奖-->
    <div class="rs_bottom">

      <ul>
        <li>
          <a href="">
            <img src="../../assets/images/container1/rightside/8.jpg" height="45" width="45"/>
          </a>
        </li>
        <li>
          <a href=""><img src="../../assets/images/container1/rightside/10.jpg" height="44" width="55"/></a>
        </li>
        <li>
          <a href=""><img src="../../assets/images/container1/rightside/11.jpg" height="46" width="48"/></a>
        </li>
      </ul>

      <div class="description">
        <span>看比分</span>
        <span>看开奖</span>
        <span>看走势</span>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "right-side",
   methods:{
     gologin:function(){
       this.$router.push({path: '/login'})
     }
   }
  }
</script>

<style scoped>
  #right-side div.rs_top,
  #right-side div.rs_middle,
  #right-side div.rs_bottom {
    width: 70%;
    height: 300px;
    border: 1px solid #ddd;
    margin-bottom: 7px;
  }

  #right-side div.rs_top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 40px;
  }

  #right-side div.rs_top img,
  #right-side div.rs_top h4,
  #right-side div.rs_top a {
    margin-bottom: 15px;
  }

  #right-side div.rs_top a {
    width: 124px;
    height: 32px;
    font-size: 16px;
    color: #e23a3a;
    background: white;
    border: 2px solid #e23a3a;
    border-radius: 6px;
  }

  #right-side div.rs_top a:hover {
    background: papayawhip;
  }

  #right-side div.rs_middle ul {
    display: flex;
    justify-content: space-between;
  }

  #right-side div.rs_middle ul li a {
    color: #555;
    font-size: 16px;
    border-color: transparent;
  }

  #right-side div.rs_middle ul li.active a{
    border-bottom: 2px solid red;
  }

  #right-side div.rs_middle ul li a:hover {
    background: white;
  }

  #net > div.nodata-icon {
    margin: 40px;
    margin-left: 78px;
  }

  #net > div.txt {
    text-align: center;
  }

  #net > div.txt {
    font-size: 14px;
    color: #999;
  }

  #right-side div.rs_bottom ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
  }

  #right-side div.rs_bottom ul li {
    margin-top: 10px;
  }

  #right-side div.rs_bottom ul li {
    margin-top: 10px;
  }

  #right-side div.rs_bottom div.description span:nth-of-type(1) {
    margin-left: 10px;
  }

  #right-side div.rs_bottom div.description span:nth-of-type(2) {
    margin-left: 35px;
  }

  #right-side div.rs_bottom div.description span:nth-of-type(3) {
    margin-left: 31px;
  }

  #right-side div.rs_bottom div.description span:hover {
    color: #e23a3a;
    cursor: pointer;
  }
</style>
